<script setup lang="ts">
defineOptions({
  name: 'ListLayout',
})

const props = withDefaults(
  defineProps<{
    enableLeftSide?: boolean
    enableRightSide?: boolean
    leftSideWidth?: number | string
    rightSideWidth?: number | string
    hideLeftSideToggle?: boolean
    hideRightSideToggle?: boolean
  }>(),
  {
    enableLeftSide: true,
    enableRightSide: true,
    leftSideWidth: 300,
    rightSideWidth: 300,
    hideLeftSideToggle: false,
    hideRightSideToggle: false,
  },
)

// 侧边栏是否折叠
const leftSideVisiable = ref(true)
const rightSideVisiable = ref(true)

const enabledLeftSide = computed(() => {
  return props.enableLeftSide && !!useSlots().leftSide
})
const enabledRightSide = computed(() => {
  return props.enableRightSide && !!useSlots().rightSide
})
</script>

<template>
  <div class="flex-container">
    <div
      v-if="enabledLeftSide" v-show="leftSideVisiable" class="left-side" :style="{
        width: typeof leftSideWidth === 'number' ? `${leftSideWidth}px` : leftSideWidth,
      }"
    >
      <slot name="leftSide" />
    </div>
    <div class="main">
      <svg-icon v-if="enabledLeftSide && !hideLeftSideToggle" class="left-side-icon" :name="leftSideVisiable ? 'ep:caret-left' : 'ep:caret-right'" @click="leftSideVisiable = !leftSideVisiable" />
      <svg-icon v-if="enabledRightSide && !hideRightSideToggle" class="right-side-icon" :name="rightSideVisiable ? 'ep:caret-right' : 'ep:caret-left'" @click="rightSideVisiable = !rightSideVisiable" />
      <div class="main-container">
        <slot name="default" />
      </div>
    </div>
    <div
      v-if="enabledRightSide" v-show="rightSideVisiable" class="right-side" :style="{
        width: typeof rightSideWidth === 'number' ? `${rightSideWidth}px` : rightSideWidth,
      }"
    >
      <slot name="rightSide" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flex-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 20px;

  .left-side,
  .right-side,
  .main {
    --container-padding: 15px;

    height: 100%;
    padding: var(--container-padding);
    background-color: var(--g-app-bg);
    transition: background-color 0.3s;
  }

  .left-side {
    margin-right: 20px;
    flex: none;
    overflow: auto;
  }

  .right-side {
    margin-left: 20px;
    flex: none;
    overflow: auto;
  }

  .main {
    flex: 1;
    position: relative;
    width: 100%;

    .left-side-icon,
    .right-side-icon {
      z-index: 1;
      font-size: 18px;
      background-color: var(--g-app-bg);
      color: var(--el-text-color-placeholder);
      transition: background-color 0.3s, var(--el-transition-color);
      border-radius: 50%;
      width: 24px;
      height: 24px;
      cursor: pointer;

      @include position-center(y);

      &:hover {
        color: var(--el-text-color-regular);
      }
    }

    .left-side-icon {
      left: -10px;
    }

    .right-side-icon {
      right: -10px;
    }

    .main-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: var(--container-padding);
      overflow: auto;
    }
  }
}
</style>
